<template>
    <div class="login">
        <div class="login-model">
            <el-card shadow="hover" v-if="modelShow == 0">
                <div class="title">小小糖登录</div>
                <el-form :model="loginForm" label-width="0">
                    <el-form-item>
                        <el-input v-model="loginForm.username" placeholder="账 号"/>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="loginForm.password" type="password" placeholder="密 码" show-password/>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" style="width: 100%;" @click="loginBut">登录</el-button>
                    </el-form-item>
                </el-form>
                
                <div class="bot">
                    <el-button link @click="modelShow = 2">忘记密码？</el-button>
                </div>

                <div class="bot-x"><p>or</p></div>

                <div class="bot">
                    <el-button link type="primary"  @click="modelShow = 1">注册</el-button>
                </div>
            </el-card>  
            
            <el-card shadow="hover" v-if="modelShow == 1">
                <div class="title">用户注册</div>
                <Register @isLogin="isLogin"></Register>
            </el-card>

            <el-card shadow="hover" v-if="modelShow == 2">
                <div class="title">修改密码</div>
                <ChangePassword @isLogin="isLogin"></ChangePassword>
            </el-card>
        </div>
           
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { push } from '../../utils'
import Register from './components/register.vue'
import ChangePassword from './components/changePassword.vue'
const modelShow = ref(0)
const loginForm = reactive({
    username: 'admin',
    password: '123456'
})

const isLogin = (data) => {
    modelShow.value = data
}
const loginBut = () => {
    const info = {
        username: 'admin',
        password: '123456'
    }
    localStorage.setItem('user', JSON.stringify(info))
    push('/')
}
</script>

<style lang="scss" scoped>
.login{
    position: fixed;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(to bottom, #c9c3ff , #3c72eb);
    > .login-model{
        position: absolute;
        margin: auto;
        padding: 35px;
        width: 300px;
        height: 500px;
        bottom: 0;
        top: 0;
        right: 0;
        left: 0;
        .title{
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 25px;
            font-weight: bold;
            color: #409EFF;
            margin-bottom: 10px;
        }
        .bot{
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
        .bot-x{
            height: 21px;
            position: relative;
            &::before{
                position: absolute;
                content: "";
                width: 100%;
                height: 1px;
                left: 0;
                top: 10px;
                background-color: #f4f4f4;
            }
            > p{
                position: absolute;
                margin: auto;
                height: 18px;
                width: 18px;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                border-radius: 100%;
                background-color: #c8c9cc;
                color: #FFFFFF;
                font-size: 12px;
                text-align: center;
                line-height: 15px;
            }
        }

    }
    
}
</style>